import axios from 'axios'
import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class search extends Component {
    
    handleSearch = () => {
        const {keyWordElement:{value:keyword}} = this
        const stateObj = {
            users:[],
            isFirst:false,//是否第一次登陆
            isLoading:true,//是否加载中
            isErorrMessage:''
        }
        PubSub.publish('showMessage',stateObj)
        axios.get(`https://api.github.com/search/users?q=${keyword}`).then(
            response => {
                const stateObj = {
                    users:response.data.items,
                    isFirst:false,//是否第一次登陆
                    isLoading:false,//是否加载中
                    isErorrMessage:''
                }
                PubSub.publish('showMessage',stateObj)
            },
            error => {
                const stateObj = {
                    users:[],
                    isFirst:false,//是否第一次登陆
                    isLoading:false,//是否加载中
                    isErorrMessage:error
                }
                PubSub.publish('showMessage',stateObj)
            }
            
        )
    }
    //将状态作为对象传入
    ChanceState = (stateObj) => {
        this.props.ChanceState(stateObj)
    }
    
    render() {
        
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search"/>&nbsp;<button onClick={this.handleSearch}>Search</button>
                </div>
            </section>
        )
    }
}
